<script>
import ActionContainer from "@/views/aihuman/HumanAssets/actionType/ActionContainer.vue";
import {getListByType} from "@/api/aihuman/humanAssets/soundType";
import {
  addOrUpdatePackInfo, addOrUpdateWithAction,
  changeStatusPack,
  deleteBatchPack,
  getPackList
} from "@/api/aihuman/humanAssets/actionType";
import RenameDialog from "@/components/aihuman/RenameDialog/index.vue";
import BatchAddPage from "@/components/aihuman/BatchAddPage/index.vue";
import {mapGetters} from "vuex";
import EmptyData from "@/components/aihuman/EmptyData/index.vue";

export default {
  name: "actionType",
  components: {EmptyData, BatchAddPage, RenameDialog, ActionContainer},
  data() {
    return {
      tabsList: [],
      // group id
      activeName: '',
      searchForm: {
        name: ''
      },
      packLoading: false,
      groupList: [],
      currentPack: {}
    }
  },
  created() {
    this.getType()
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addPackBtn: this.vaildData(this.permission[`assets-action-addpack`], false),
        editPackBtn: this.vaildData(this.permission[`assets-action-editpack`], false),
        enablePackBtn: this.vaildData(this.permission['assets-action-status-pack'], false),
        deletePackBtn: this.vaildData(this.permission['assets-action-delete-pack'], false),
        addBtn: this.vaildData(this.permission['assets-action-add'], false),
        editBtn: this.vaildData(this.permission['assets-action-edit'], false),
        deleteBtn: this.vaildData(this.permission['assets-action-delete'], false),
      }
    }
  },
  methods: {
    async saveData(o) {
      console.log(o);

      const params = {
        actionPackage: {
          id: o.pack.id || '',
          name: o.pack.name,
          groupId: o.pack.groupId,
          type: o.pack.type,
          fileUrl: o.pack.fileUrl,
          fileFolderUrl: o.pack.fileFolderUrl,
          status: 0,
        },
        actionList: o.list.map(el => ({
          id: el.uuid,
          packageId: o.pack.id || '',
          animateFile: o.pack.fileUrl,
          actionType: o.pack.type,
          actionName: el.name,
          actionIdUe: el.id,
          actionSecond: el.second,
          actionVideoLink: el.previewImg,
          actionGroupId: o.pack.groupId,
          status: 0,
          fileName: o.pack.name,
          actionMeaning: el.desc.join(',')
        }))
      }
      try {
        const {data} = await addOrUpdateWithAction(params)
        this.$message.success(data.msg)
        if (o.pack.type === 3) {
          this.$refs.packRef.submitLoading = false
          this.$refs.packRef.close()
        } else {
          this.$refs.packUeRef.submitLoading = false
          this.$refs.packUeRef.close()
        }
        this.$nextTick(() => {
          this.getGroups()
        })
      } catch (e) {
        this.$message.error(e)
        if (o.pack.type === 3) {
          this.$refs.packRef.submitLoading = false
        } else {
          this.$refs.packUeRef.submitLoading = false
        }
      }

    },
    async savePackInfo(val) {
      const {data} = await addOrUpdatePackInfo(val)
      this.$message.success(data.msg)
      this.getGroups()
      this.$refs.renameDialog.close()
    },
    async removePack(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let ids = [row.id]

        let params = {
          ids: ids.join(",")
        }
        const {data} = await deleteBatchPack(params)
        this.$message({
          type: 'success',
          message: data.msg
        })
        this.getGroups()
      });

    },
    editName(item) {
      this.$refs.renameDialog.open(item)
    },
    async toggleAction(row) {
      try {
        const {data} = await changeStatusPack({id: row.id, status: row.status ^ 1})
        this.$set(row, 'status', row.status ^ 1)
      } catch (e) {
        console.log(e)
        this.$set(row, 'status', row.status)
      }

      this.$refs.actionBlock.searchForm.packageId = this.currentPack.id
      this.$refs.actionBlock.paging.pageNo = 1
      this.$refs.actionBlock.groupId = this.activeName
      this.$refs.actionBlock.type = this.currentPack.type

      this.$refs.actionBlock.getList()
    },
    handlePack(item) {
      console.log(item);
      this.currentPack = item

      this.$refs.actionBlock.searchForm.packageId = this.currentPack.id
      this.$refs.actionBlock.paging.pageNo = 1
      this.$refs.actionBlock.groupId = this.activeName
      this.$refs.actionBlock.type = this.currentPack.type

      this.$refs.actionBlock.getList()
    },
    getGroups() {
      this.$nextTick(async () => {
        this.packLoading = true
        let params = {
          groupId: this.activeName,
          ...this.searchForm,
          pageNo: 1,
          pageSize: 1000
        }
        const {data} = await getPackList(params)
        this.groupList = data.data.records
        this.currentPack = data.data.records[0]
        this.packLoading = false

        this.$refs.actionBlock.searchForm.packageId = this.currentPack.id
        this.$refs.actionBlock.paging.pageNo = 1
        this.$refs.actionBlock.groupId = this.activeName
        this.$refs.actionBlock.type = this.currentPack.type

        this.$refs.actionBlock.getList()
      })
    },
    async getType() {
      const {data} = await getListByType({type: 1})
      this.tabsList = data.data
      this.activeName = this.tabsList[0].id

      this.getGroups()
    },
    handelTabs(tabs) {
      this.activeName = tabs.id
      this.getGroups()
    },
    /**
     * 下拉菜单显隐操作修改dom
     * @param val
     * @param dom
     */
    handleVisible(val, dom) {
      if (val) {
        let iconDom = document.querySelector(`#${dom}`)
        iconDom.style.display = 'block'
      } else {
        let id = dom.split('-')
        if (id[1] !== this.currentPack.id) {
          let iconDom = document.querySelector(`#${dom}`)
          iconDom.removeAttribute('style')
        }
      }
    },
    addPackWeb3d() {
      this.$refs.packRef.open(this.activeName)
    },
    addUePack() {
      this.$refs.packUeRef.open(this.activeName)
    },
  }
}
</script>

<template>
  <huilan-basic>
    <div class="page">

      <aside class="side">
        <header>
          <h3>动作列表</h3>
          <div class="group-tabs">
            <div
              v-for="item in tabsList"
              :key="item.id"
              :class="['group-tabs__item', {'active': item.id === activeName}]"
              @click="handelTabs(item)"
            >
              <template v-if="item.groupName.includes('男')">
                <img class="img-default" src="@/assets/aihuman/man.png" alt="">
                <img class="img-active" src="@/assets/aihuman/man-active.png" alt="">
              </template>
              <template v-else>
                <img class="img-default" src="@/assets/aihuman/woman.png" alt="">
                <img class="img-active" src="@/assets/aihuman/woman-active.png" alt="">
              </template>
              {{ item.groupName }}
            </div>
          </div>

          <div class="search-box">
            <div class="input-box">
              <input v-model="searchForm.name" type="text" placeholder="输入搜索文字">
              <i class="el-icon-search" @click="getGroups"></i>
            </div>

            <el-dropdown v-if="permissionList.addPackBtn" trigger="hover">
              <div class="add-box">
                <i class="el-icon-plus"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="addPackWeb3d">新增Web3D</el-dropdown-item>
                <el-dropdown-item @click.native="addUePack">新增UE3D</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </header>

        <div class="side-container" v-loading="packLoading">
          <ul v-if="groupList.length > 0" class="pack-list">
            <li
              v-for="(item, index) in groupList"
              :key="index"
              :class="{'active': currentPack && currentPack.id === item.id}"
              @click="handlePack(item)"
            >
              <div class="pack-name">
                <span
                  :class="['pack-tag',
                  {'pack-tag--green': item.type === 4},
                  {'pack-tag--disabled': item.status === 1}]">
                  {{ item.type === 3 ? 'Web3D' : 'UE3D' }}
                </span>
                <div :class="['pack-name-box', {'pack-name-box--disable': item.status === 1}]"
                :title="item.name">
                  {{ item.name }}
                </div>
              </div>
              <el-dropdown trigger="hover" @visible-change="handleVisible($event,`icon-${item.id}`)">
                <div :id="`icon-${item.id}`" class="el-icon-more more-icon"></div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-if="permissionList.editPackBtn"
                    @click.native="editName(item)">编辑
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="permissionList.enablePackBtn"
                    @click.native="toggleAction(item)">
                    {{ item.status === 0 ? '停用' : '启用' }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="permissionList.deletePackBtn"
                    @click.native="removePack(item)"
                  >删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
          <empty-data size="100" v-else/>
        </div>
      </aside>
      <div class="main">
        <action-container
          ref="actionBlock"
        />
      </div>
    </div>

    <rename-dialog
      ref="renameDialog"
      @on-submit="savePackInfo"
    />

    <batch-add-page
      ref="packRef"
      type="web3d"
      :data-type="1"
      file-folder-url="HumanAssets/actionType/web3d/"
      table-title="动作添加"
      preview-type="video"
      @submit="saveData"
    />

    <batch-add-page
      ref="packUeRef"
      :data-type="1"
      type="ue"
      file-folder-url="HumanAssets/actionType/ue/"
      table-title="动作添加"
      previewType="video"
      @submit="saveData"
    />
  </huilan-basic>
</template>

<style scoped lang="scss">
@import "~@/styles/aihuman/aihuman-assets";
</style>
